<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!--<meta name="referrer" content="no-referrer"/>-->
	<meta name="referrer" content="never">
	<meta name="active" th:content="${info.attrs.get('active')}">
	<meta name="platform" th:content="${info.platform}">
	<title th:text="${info.name == null}?'': ${info.name} + '--正在播放'">播放</title>
	<link rel="stylesheet" type="text/css" href="/css/search.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="/css/play.css">
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/i18n/defaults-zh_CN.min.js"></script>
	<script src="/frame/js/broadcast.js"></script>
</head>
<script src="/js/hash.js"></script>
<script src="/js/Util.js"></script>
<script src="/js/suggestBox.js"></script>
<script src="/js/shareRoom.js"></script>
<script >
	if (!util.os.isPc) {
		var link = document.createElement("link");
		link.setAttribute("rel", "stylesheet");
		link.setAttribute("type", "text/css");
		link.setAttribute("href", "/css/play_phone.css");
		document.head.appendChild(link);
	}
	var video = {
		end: function (){
			var next = $(active).parent().next();
			if (next.length == 0){
				next = $(active).parents("ul").find("li").get(0);
				if ( util.isNullString(next)){
					return;
				}
			}
			next = $(next).find("a").get(0);
			Hash.hashPath("/play", {index: $(next).attr("index")});
		},
		reload: function(){
			if (null == active || active.length == 0){
				window.location.reload();
			}
			else{
				changeActive(active);
			}
		},
		isShareRoom: true
	}

	var channelId = new Date().getTime() + '' + parseInt(Math.random()*1000);
	// 创建半双工广播
	var broadcastChannel = new HalfDuplexBroadcast(channelId);
	// 创建处理器
	var handler = new Handler("objectProxy", broadcastChannel);
	var proxyHandler = new ObjectProxyHandler(handler);
	// 绑定对象，供远程调用
	proxyHandler.binding("pvideo", new ObjectProxyBinding(video));

</script>
<body>
<nav class="navbar navbar-inverse" role="navigation">
	<div class="container-fluid">
		<div class="navbar-header phone_inline_block">
			<a class="navbar-brand">欢迎使用</a>
		</div>
		<div class="phone_inline_block phone_right" >
			<ul class="nav navbar-nav phone_left shareRoom">
				<li><a href="javascript:void(0);" onclick="share();">分享</a></li>
			</ul>
			<div class="nav navbar-nav navbar-right phone_left">
				<a class="navbar-brand" th:if="${!isLogin}" href="/login"><i class="fa fa-user-o"><span style="padding: 0px 5px;">登录</span></i></a>
				<a class="navbar-brand" th:if="${isLogin}" href="/user/history">
							<span class="headimg headImgSize">
								<img class="fa headImgSize" th:src="${user.getImg()}"/>
							</span>
					<span class="headimgname" th:text="${user.getAccount()}">已登录</span>
				</a>
			</div>
			<!--<ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        解析器 <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">blob</a></li>
                        <li><a href="#">bozrc</a></li>
                        <li><a href="#">ok</a></li>
                        <li><a href="#">ckmov</a></li>
                        <li><a href="#">laobandq</a></li>
                        <li><a href="#">8090g</a></li>
                    </ul>
                </li>
            </ul>-->
			<div class="navbar-form navbar-right select-user phone_hidden">
				<select class="selectpicker">
					<option th:each="parser:${parsers}" th:value="${parser.val}" th:checked="${parser.checked}" th:text="${parser.key}"></option>
				</select>
			</div>
		</div>
	</div>
</nav>
<div>
	<div class="iframeBox">
		<iframe src="" id="iframe" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
	</div>
	<div id="box">
		<div class="baseBox">
			<span class="title" th:text="${info.name}">人世间</span>
			<div>
				<span style="color: white;" th:if="${info.desc != null}" >简介：</span>
				<div>
					<span style="color: darkgray;" th:text="${info.desc}" id="desc"></span>
				</div>
			</div>
			<div>
				<a class="toggleBtn" href="javascript:void(0);" onclick="slideToggle(this);">展开</a>
			</div>
		</div>
		<div>
			<div>
				<div class="text1">选集</div>
			</div>
			<ul class="videoInfos">
				<li th:each="videoInfo:${info.videoInfos}" th:attr="title=${videoInfo.desc},url=${videoInfo.url},platform=${videoInfo.platform}" th:classappend="${videoInfo.displayMode==1}?'':'block'">
					<a th:attr="index=${videoInfo.number}" th:text="${videoInfo.displayMode == 1?videoInfo.title:videoInfo.number}" href="javascript:void(0);"></a>
				</li>
			</ul>
		</div>
	</div>
</div>
</body>
<script type="text/javascript">
	Hash.addListener("/play", function(e, param){
		var index = param.get("index");
		changeActive($("#box a[index="+ index +"]").get(0));
	});
	initDescStatus();
	// 初始化播放器页面高度
	var active = null;
	var iframe = document.getElementById("iframe");

	if (util.os.isPc) {
		$(iframe).css("height", $("#box").css("height"));
	}
	else {
		var h = $(".navbar").height() + $(".iframeBox").height() + $(".baseBox").height() + $(".text1").height() + 15;
		$(".videoInfos").height(window.innerHeight - h);
	}

	if($("#box ul li").hasClass("block")){
		$("#box ul").css("margin-left", ($("#box ul").width() % 62)/2 + "px");
	}

	var activeIndex = Hash.getParameter().get("index");
	// 如果url未指明Index， 由设置meta[name=active]默认
	if (!activeIndex){
		activeIndex = $("meta[name=active]").attr("content");
		// 如果meta[name=active]未指明Index，则可能是部分url有问题，设为默认第一集;
		activeIndex = util.getDefault(activeIndex, "1", true);
		// 设置
		Hash.hashPath("/play", {index: activeIndex});
	}
	else{
		// url指明的直接调用，因为在刷新时url不会变化，不会触发
		changeActive($("#box a[index="+ activeIndex +"]").get(0));
	}

	// 简介部分开始
	// 简介部分展开/收起按钮事件
	function slideToggle( obj ){
		if (obj.innerText.trim() === "展开"){
			obj.innerText = "收起";
			$("#desc").removeClass("desc");
		}
		else{
			obj.innerText = "展开";
			$("#desc").addClass("desc");
		}
	}
	function initDescStatus(){
		$("#desc").removeClass("desc");
		$(".toggleBtn").css("display", "none");
		// 初始化简介收起状态
		var desc = document.getElementById("desc");
		var rects = desc.getClientRects();
		// 超过5行显示按钮，限制最大显示5行
		if (rects.length > util.os.isPc?5:3){
			$(".toggleBtn").css("display", "inline");
			$("#desc").addClass("desc");
		}
		// 简介部分结束
	}

	// 正在播放剧集切换
	function changeActive(target){
		if (active != null){
			$(active).removeClass("active");
		}
		$( target ).addClass("active");
		active = target;
		var p = $(target).parent();
		if (!iframe.src){
			iframe.setAttribute("src", "");
		}
		iframe.src = "/player?url="+$(p).attr("url") + "&name="+$( target ).attr("index") +"&title="+$(".title").text() +"&parser=&platform=" +  $(p).attr("platform") + "&channelId=" + channelId;;
		if (!util.isNullString($(p).attr("title"))){
			$("#desc").text($(p).attr("title"));
			initDescStatus();
		}
	}

	// 剧集按钮点击切换活跃状态
	$("#box").delegate("li a", "click", function(e){
		var index = $( e.currentTarget ).attr("index");
		if (Hash.getParameter().get("index") == index){
			video.reload();
			return;
		}
		Hash.hashPath("/play", {index: index});
	});
	$(".selectpicker").on("changed.bs.select", function (e, val){
		video.reload();
	});
</script>

<script>
	if (typeof(WebSocket) == "undefined"){
		alert("您的浏览器不支持该功能");
		window.close();
	}
	function createRoom(){
		let result = {};
		$.ajax({
			type: "GET",
			url: "/share/createRoom",
			async: false,
			success: (r) => {
				if (r.code == 0){
					result = r.data;
					return;
				}
				alert(r.msg);
				throw r.msg;
			}
		});
		return result;
	}
	function supportShare(docid, tvid, platform){
		let support = false;
		$.ajax({
			type: "POST",
			url: "/share/support",
			data: {docid: docid, tvid: tvid, platform: platform},
			async: false,
			success: (r) => {
				support = (r.code == 0);
				if (!support) {
					alert(r.msg);
				}
			}
		});
		return support;
	}
	function initVideo(videoController) {
		var win = document.getElementById("iframe").contentWindow
		var video = win.video;
		video.source = function(src) {
			if (src === undefined) {
				return {
					src: win.playConfig.url,
					type: win.playConfig.type
				}
			}
			if (source != null && source.src != src.src) {
				location.reload();
			}
			source = src;
			loadVideo(src.src, src.type);
		}
		videoController.changeVideoElem(video);
	}
	const p = util.getParameter();
	var roomInfo = null;
	if (supportShare(p.get("docid"), p.get("tvid"), p.get("platform"))) {
		roomInfo = createRoom();

		var videoController = new VideoController({});
		var connect = new shareRoomConnect(roomInfo.roomAddr, videoController);
		connect.addEventListener("close", function (a) {
			alert("连接断开");
		})
		var index = setInterval(function() {
			if (connect.readyState === 1){
				if (videoController.ready()) {
					videoController.uploadVideo = true;
					connect.sendPackage(videoController);
				}
			}
			else if (connect.readyState > 1) {
				clearInterval(index);
			}
		}, 1000);

		document.getElementById("iframe").onload = function() {
			initVideo(videoController);
		}
	}

	function share(){
		if (roomInfo == null) {
			alert("正在创建房间，请稍后再试")
		}
		else{
			alert(location.origin + "/share/room?key=" + roomInfo.key);
		}
	}
</script>
</html>